<template>
  <div id="Inventory">
      <div class="address">
        <h3>商品管理 > 库存</h3>
      </div>
      <div class="show-sales"> 
        <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
          <el-table
            class="room-type-table"
            ref="multipleTable TABLEMINWIDH"
            :data="goods"
            :key="updateTableKey"
            tooltip-effect="dark"
            style="width: 100%;font-size: 1.5rem;">
            <!-- 选择框 -->
            <el-table-column
              type="selection"
              min-width="10%">
            </el-table-column>
            <!-- 商品名 -->
            <el-table-column
              label="商品"
              prop="title"
              header-align="center"
              align="center"
              min-width="10%">
            </el-table-column>
            <!-- 价格 -->
            <el-table-column
              label="单价"
              header-align="center"
              align="center"
              class="test"
              min-width="15%">
              <template slot-scope="scope" >
                <div class="editStatus" v-if="scope.row.isEdit">
                  <i slot="suffix" class="hotel-management-icon icon-renminbi1688"></i>
                  <input type="text" class="inputPrice my-input" v-model="scope.row.input">
                  <i class="el-icon-close" @click="cancelEdit(scope.row)">
                    <span class="icon-text">取消</span>
                  </i>
                  <i class="el-icon-notebook-2" @click="saveEdit(scope.row)">
                    <span class="icon-text">保存</span>
                  </i>
                </div>
                <span class="money" v-else>
                  <i class="hotel-management-icon icon-renminbi1688"></i>
                  {{scope.row.price}}
                  <i class="el-icon-edit" @click="modifyPrice(scope.row)"></i>
                </span>
              </template>
            </el-table-column>
            <!-- 数量 -->
            <el-table-column
              label="数量"
              prop="inventory"
              header-align="center"
              align="center"
              min-width="10%">
            </el-table-column>
          </el-table>
        </el-scrollbar><!-- /滚动条 -->
      </div>
  </div>
</template>

<script>
import { loadingMixin } from '@/utils/mixins/loading'
import { getAllGoods, modifyOneGoods } from '@/api/api'
import { showMessage } from '@/utils/utils'
export default {
  mixins: [loadingMixin],
  name: 'Inventory',
  data() {
    return {
      updateTableKey:Math.random(),
      goods:[]
    }
  },
  methods: {
    change() {
      this.$forceUpdate()
    },
    // 取消编辑状态
    cancelEdit(row) {
      row.isEdit = false
      row.input = ''
      this.updateTableKey = Math.random()
    },
    // 进入编辑状态
    saveEdit(row) {
      modifyOneGoods(row.gin, { 
        "inventory": row.inventory, "price": row.input, "title": row.title, "gin": row.gin
        }).then(response => {
          if(response.data === '修改成功！') {
            showMessage(this, '修改成功', 'success')
            row.price = row.input
            row.isEdit = false
            this.updateTableKey = Math.random()
          }
        }).catch(error =>  showMessage(this, '修改商品信息失败！', 'error'))
    },
    // 修改价格
    modifyPrice(row) {
      row.isEdit = true
      this.updateTableKey = Math.random()
    },
    async load() {
      await Promise.resolve(getAllGoods().then(response => {
          this.goods = response.data
          for(let obj of this.goods) {
            obj['input'] = ''
            obj['isEdit'] = false
          }
        }).catch(error =>  showMessage(this, '获取所有商品失败！', 'error'))
      )
    }
  }
}
</script>

<style>
#Inventory .el-table__row:hover .el-icon-edit{
  display: inline-block;
}
#Inventory .one-bt .el-button [class*=el-icon-]+span {
  margin: 0;
}
#Inventory .cell{
  overflow: visible;
}
</style>
<style lang="less" scope>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
}
.editStatus{
  position: relative;
  display: inline-flex;
  align-items: center;
  i{
    width: 2rem;
    color: #AA97B0;
    position: absolute;
    font-size: 1rem;
    top: 7px;
    &:hover{
      color: red;
    }
    &:hover .icon-text{
      display: block;
    }
    .icon-text{
      width: 2rem;
      position: relative;
      top: -40px;
      display: none;
    }
  }
  .el-icon-close{
    margin-left: 110px;
  }
  .el-icon-notebook-2{
    margin-left: 140px;
  }
  .icon-renminbi1688{
    top: 4px;
  }
}
.money{
    display: inline-flex;
    align-items: center;
    color: red;
    position: relative;
    top: -2px;
    margin-left: 5px;
    position: relative;
    .el-icon-edit{
      font-size: 1rem;
      position: absolute;
      left: 70px;
      top: 5px;
      color: rgba(0, 255, 255, 0.808);
      display: none;
    }
  }
.inputPrice{
  width: 6rem;
  i{
    position: relative;
    top: 3px;
  }
}
.my-input{
  box-sizing: border-box;
  width: 96px;
  height: 28px;
  padding-left: 30px;
  padding-right: 10px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  &:focus, &:focus-visible{
    border-color: #409EFF;
    outline: 0px;
  }
}
</style>